<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>22-欧拉角解析物体旋转</title>
    <style>
      * {
        margin: 0;
        padding: 0;
      }

      html,
      body {
        width: 100%;
        height: 100%;
        overflow: hidden;
      }
    </style>
  </head>

  <body>
    <script type="module">
      // 引入three.js
      import * as THREE from "three";
      //引入物理引擎cannon
      import * as Cannon from "cannon";
      import { OrbitControls } from "three/examples/jsm/controls/OrbitControls.js";
      import {
        scene,
        camera,
        renderer,
        createLight,
      } from "../utils/three-base";

      const endPoint = new THREE.Vector3(0, 0, 0);
      camera.position.set(0, 0, 10);
      camera.lookAt(endPoint);

      const box = new THREE.Mesh()

      /*
        360° = 2*π
        180° = π
        1° = π / 180
        90° = π / 180 * 90
      */
      // 绕着x旋转90度：Euler方法
      // const euler = new THREE.Euler(Math.PI / 2,0,0)
      // box.rotation.copy(euler)
      // 绕着x旋转90度：set方法
      // box.rotation.set(Math.PI / 2,0,0)
      // 绕着x旋转90度：rotateX方法
      box.rotateX((Math.PI / 180) * 90)
      
      //控制插件
      const controls = new OrbitControls(camera, renderer.domElement);
      controls.enableDamping = true; //开启惯性,需要和update方法配合使用

      let angle = 0 //角度
      //动画函数
      function animate() {
        angle += 1
        // box.rotation.set((Math.PI / 2) * angle,0,0)
        // box.rotation.x = (Math.PI / 2) * angle //单独设置
        requestAnimationFrame(animate);
        controls.update();
        renderer.render(scene, camera);
      }
      animate();
    </script>
  </body>
</html>
